<doc>地图组件</doc>
<template>
  <div class="map-div">
    <!-- 地图渲染DOM -->
    <div id="map-ol"></div>
    <!-- 状态栏 -->
    <statusBar v-if="mapObject" :mapObject="mapObject" :mapConfig="mapConfig"></statusBar>

    <MapToolBar></MapToolBar>
    <MapLeftTree></MapLeftTree>
    <MapBottomTable></MapBottomTable>
  </div>
</template>
<script>
import MapObject from "../js/map";
import statusBar from "./statusBar.vue";
import MapToolBar from "./MapToolBar.vue";
import MapLeftTree from "./MapLeftTree.vue";
import MapBottomTable from "./MapBottomTable.vue";

export default {
  components: {
    statusBar, // 状态栏
    MapToolBar, // 地图工具栏
    MapLeftTree, // 左侧树
    MapBottomTable, // 下方列表
  },

  data() {
    return {
      mapObject: null, // 地图引擎加载对象
      mapTypeName: "GDM", // 地图引擎默认加载底图。可选择值：GDM、TSM、TSLM、Google、OMS（默认）
      layerSelectShow: true, // 是否开启底图选择器。true 显示比例尺；flase 不显示比例尺
      mapConfig: {
        // 地图属性配置
        mouseMove: true, // 开始鼠标移动事件
        mapMoved: true, // 地图移动完成事件
        mouseDraw: true, // 鼠标绘制
      },
    };
  },
  // watch: {
  //   mapTypeName: {
  //     // 监听底图切换
  //     handler(newVal, oldVal) {
  //       this.mapObject.changeMap(this.mapTypeName);
  //     },
  //   },
  // },

  mounted() {
    setTimeout(() => {
      this.initMap(); // 初始化地图引擎
    }, 1)
  },
  destroyed() {
    this.mapObject = null;
  },


  methods: {
    // 初始化地图引擎
    initMap() {
      // 初始化地图引擎。(DOM ID，初始中心点坐标数组, 初始层级, 初始底图, 其他配置对象)
      this.mapObject = new MapObject(
          "map-ol",
          [103.403694, 36.924896],
          5,
          this.mapTypeName,
          {
            scale: true, // 开启比例尺
            ...this.mapConfig,
          }
      );
    },

  },
};
</script>
<style scoped>
.map-div,
#map-ol {
  height: 100%;
  width: 100%;
  background-color: #a4cdff;
  position: relative;
}

div /deep/ .ol-attribution,
div /deep/ .ol-zoom {
  display: none;
}

.draw-div {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 12px;
  padding: 5px 10px;
  background-color: #fff;
  box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
}

.draw-btn {
  width: 100%;
  margin: 5px 0;
  cursor: pointer;
}
</style>
